<template>
  <div>
    <div ref="editor" class="quill-editor"></div>
    <button @click="saveArticle">保存文章</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import Quill from 'quill';

const editor = ref(null);
let quill;

onMounted(() => {
  quill = new Quill(editor.value, {
    theme: 'snow',
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline'],
        ['link', 'image'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['clean'] // remove formatting button
      ]
    }
  });
});

const saveArticle = () => {
  const content = quill.root.innerHTML; // 获取富文本内容
  // 发送请求保存文章
};
</script>

<style>
.quill-editor {
  height: 400px;
}
</style> 